<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>上传音乐 - 音乐服务器</title>

    <!-- 引入Tailwind CSS实现现代UI -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome图标 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6366f1', // 主色调：靛蓝色
                        secondary: '#10b981', // 辅助色：绿色（契合"上传"正向操作）
                        neutral: '#f3f4f6',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-upload {
                background: linear-gradient(135deg, #6366f1 0%, #10b981 100%);
            }
            .card-shadow {
                box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.1), 0 8px 10px -6px rgba(16, 185, 129, 0.1);
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-secondary/50 focus:border-secondary focus:outline-none;
            }
            .btn-hover-effect {
                @apply hover:shadow-md hover:shadow-secondary/20 active:scale-95 transition-all;
            }
            .file-drop-hover {
                @apply border-secondary bg-green-50;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm sticky top-0 z-10">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <div class="w-10 h-10 rounded-full bg-gradient-upload flex items-center justify-center text-white">
                <i class="fa fa-upload"></i>
            </div>
            <h1 class="text-xl font-bold text-gray-800">上传音乐</h1>
        </div>

        <div class="flex items-center space-x-4">
            <a href="list.html" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                <i class="fa fa-home mr-1"></i>
                <span class="hidden sm:inline">音乐首页</span>
            </a>
            <a href="loveMusic.html" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                <i class="fa fa-heart mr-1"></i>
                <span class="hidden sm:inline">我的收藏</span>
            </a>
            <a href="user.html" class="text-gray-600 hover:text-primary transition-colors flex items-center">
                <i class="fa fa-user mr-1"></i>
                <span class="hidden sm:inline">用户</span>
            </a>
        </div>
    </div>
</header>

<!-- 主要内容区 -->
<main class="flex-grow container mx-auto px-4 py-8">
    <div class="max-w-2xl mx-auto">
        <!-- 标题区域 -->
        <div class="text-center mb-8">
            <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800 mb-2">添加新音乐</h2>
            <p class="text-gray-500">上传您喜爱的音乐到服务器，支持MP3格式文件</p>
        </div>

        <!-- 上传表单卡片 -->
        <div class="bg-white rounded-xl shadow-sm p-6 md:p-8 card-shadow">
            <form method="POST" enctype="multipart/form-data" action="/music/upload" id="uploadForm">
                <!-- 文件上传区域 -->
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-3">选择音乐文件</label>

                    <!-- 拖放上传区域 -->
                    <div id="fileDropArea" class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-primary transition-colors cursor-pointer">
                        <input
                                type="file"
                                name="filename"
                                id="fileInput"
                                accept=".mp3"
                                class="hidden"
                        >

                        <div class="flex flex-col items-center">
                            <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mb-4">
                                <i class="fa fa-music text-secondary text-2xl"></i>
                            </div>
                            <p class="text-gray-600 mb-2">拖放MP3文件到此处，或</p>
                            <button
                                    type="button"
                                    id="browseButton"
                                    class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg btn-hover-effect"
                            >
                                <i class="fa fa-folder-open mr-2"></i>浏览文件
                            </button>
                            <p class="text-xs text-gray-400 mt-3">支持的格式：MP3 | 最大文件大小：10MB</p>
                        </div>

                        <!-- 选中文件显示区域 -->
                        <div id="selectedFile" class="hidden mt-4 p-3 bg-gray-50 rounded-lg flex items-center">
                            <i class="fa fa-file-audio-o text-secondary mr-2"></i>
                            <span id="fileNameDisplay" class="flex-grow truncate"></span>
                            <button type="button" id="removeFile" class="text-gray-400 hover:text-red-500">
                                <i class="fa fa-times"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 歌手名输入 -->
                <div class="mb-6">
                    <label for="singer" class="block text-sm font-medium text-gray-700 mb-1">歌手名</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                            <i class="fa fa-user"></i>
                        </div>
                        <input
                                type="text"
                                name="singer"
                                id="singer"
                                placeholder="请输入歌手名称"
                                class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus transition-all"
                                required
                        >
                    </div>
                </div>

                <!-- 歌曲名输入 (新增字段，可选) -->
                <div class="mb-8">
                    <label for="songTitle" class="block text-sm font-medium text-gray-700 mb-1">歌曲名（可选）</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                            <i class="fa fa-music"></i>
                        </div>
                        <input
                                type="text"
                                name="title"
                                id="songTitle"
                                placeholder="不填则默认使用文件名"
                                class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 input-focus transition-all"
                        >
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
                    <a href="list.html" class="w-full sm:w-auto flex items-center justify-center px-4 py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
                        <i class="fa fa-arrow-left mr-2"></i>返回列表
                    </a>

                    <button
                            type="submit"
                            class="w-full sm:w-auto bg-secondary hover:bg-secondary/90 text-white px-6 py-3 rounded-lg btn-hover-effect flex items-center justify-center"
                    >
                        <i class="fa fa-cloud-upload mr-2"></i>上传音乐
                    </button>
                </div>
            </form>
        </div>

        <!-- 上传提示 -->
        <div class="mt-6 bg-blue-50 border border-blue-100 rounded-lg p-4 text-sm text-blue-700">
            <div class="flex items-start">
                <i class="fa fa-info-circle mt-0.5 mr-2"></i>
                <p>上传成功后，音乐将自动添加到您的音乐列表中。请确保您拥有该音乐的合法使用权。</p>
            </div>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-white border-t border-gray-200 py-6 mt-12">
    <div class="container mx-auto px-4 text-center text-gray-500 text-sm">
        <p>&copy; 2023 音乐服务器 | 上传中心</p>
    </div>
</footer>

<!-- 引入jQuery -->
<script src="js/jquery-3.1.1.min.js"></script>

<!-- 上传交互脚本 -->
<script>
    $(function(){
        // 浏览文件按钮点击事件
        $("#browseButton").click(function(){
            $("#fileInput").click();
        });

        // 文件选择变化事件
        $("#fileInput").change(function(e){
            if(e.target.files.length > 0) {
                var file = e.target.files[0];
                // 验证文件类型
                if(file.type !== "audio/mpeg" && !file.name.endsWith(".mp3")) {
                    alert("请上传MP3格式的音频文件");
                    $(this).val("");
                    return;
                }

                // 验证文件大小（10MB）
                if(file.size > 10 * 1024 * 1024) {
                    alert("文件大小不能超过10MB");
                    $(this).val("");
                    return;
                }

                // 显示选中的文件
                $("#fileNameDisplay").text(file.name);
                $("#selectedFile").removeClass("hidden");
            }
        });

        // 移除文件按钮点击事件
        $("#removeFile").click(function(){
            $("#fileInput").val("");
            $("#selectedFile").addClass("hidden");
        });

        // 拖放功能实现
        var fileDropArea = document.getElementById("fileDropArea");

        // 拖放事件
        fileDropArea.addEventListener("dragover", function(e){
            e.preventDefault();
            $(this).addClass("file-drop-hover");
        });

        fileDropArea.addEventListener("dragleave", function(){
            $(this).removeClass("file-drop-hover");
        });

        fileDropArea.addEventListener("drop", function(e){
            e.preventDefault();
            $(this).removeClass("file-drop-hover");

            if(e.dataTransfer.files.length > 0) {
                var file = e.dataTransfer.files[0];
                // 验证文件类型
                if(file.type !== "audio/mpeg" && !file.name.endsWith(".mp3")) {
                    alert("请上传MP3格式的音频文件");
                    return;
                }

                // 验证文件大小
                if(file.size > 10 * 1024 * 1024) {
                    alert("文件大小不能超过10MB");
                    return;
                }

                // 模拟文件输入
                var dataTransfer = new DataTransfer();
                dataTransfer.items.add(file);
                $("#fileInput")[0].files = dataTransfer.files;

                // 显示选中的文件
                $("#fileNameDisplay").text(file.name);
                $("#selectedFile").removeClass("hidden");
            }
        });

        // 点击拖放区域也触发文件选择
        fileDropArea.addEventListener("click", function(e){
            if(!$(e.target).is("button") && !$(e.target).closest("button").length) {
                $("#fileInput").click();
            }
        });

        // 表单提交前验证
        $("#uploadForm").submit(function(e){
            // 检查是否选择了文件
            if($("#fileInput").get(0).files.length === 0) {
                e.preventDefault();
                alert("请先选择要上传的音乐文件");
                return false;
            }

            // 检查歌手名是否填写
            if($("#singer").val().trim() === "") {
                e.preventDefault();
                alert("请输入歌手名称");
                $("#singer").focus();
                return false;
            }

            // 显示上传提示
            alert("文件开始上传，请等待完成...");
        });
    });
</script>
</body>
</html>